<template>
  <!-- 全部企业 -->
  <view class="conter">
    <cc-goback title='全部企业' color="#fff"></cc-goback>
    <view class="screen" @click="popup">
      <image src="../../static/bg_slices/8.png" mode=""></image>
       筛选
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup">
        <view class="popup_head">
          筛选企业状态
        </view>
        <view class="switch">
          <view class="switch_right" :class="{switch_left:falg==0}" @click="cheang">
           全部
          </view>
          <view class="switch_right" :class="{switch_left:falg==1}" @click="cheang_a">
            正常
          </view> 
          <view class="switch_right" :class="{switch_left:falg==2}" @click="cheang_b">
            预警
          </view> 
          <view class="switch_right" :class="{switch_left:falg==3}" @click="cheang_c">
           报警
          </view>
        </view>
      </view>
    </uni-popup>
    <view class="navigation_head"></view>
    <view class="ranking_frist">
      <view class="ranking_two ranking_word">
        排名
      </view>
      <view class="ranking_three ranking_word">
        企业名称
      </view>
      <view class="ranking_four ranking_word">
        <view class="word_a">
          厂界
        </view>
        <!-- <image src="../../static/home_page/shangla.png" mode=""></image> -->
      </view>
      <view class="ranking_five ranking_word">
        <view class="word_a">
          排口
        </view>
        <!-- <image src="../../static/home_page/xia.png" mode=""></image> -->
      </view>
      <view class="ranking_six ranking_word">
        工况
      </view>
      <view class="ranking_seven ranking_word">
        状态
      </view>
    </view>
    <!-- <navigator class="ranking_number" url="/pages/enterprise_information/enterprise_information">
      <view class="number_a number_style">
        1
      </view>
      <view class="number_b number_style">
        永利
      </view>
      <view class="number_c number_style">
        35
        <view class="number_cd">
          mg/m³
        </view>
      </view>
      <view class="number_d number_style">
        35
        <view class="number_cd">
          mg/m³
        </view>
      </view>
      <view class="number_e">
        <view class="number_ee">
          5
        </view>
        <view class="number_ee">
          3
        </view>
        <view class="number_ee">
          1
        </view>
      </view>
      <view class="number_f">
        正常
      </view>
    </navigator> -->
    <view class="ranking_number" v-for="(item,i) in screenList" :key='i'>
      <view class="ranking_number" :class="i%2==0?'':'R_color'">
      <view v-if="i==0" class="number_a number_style_a">
        <view class="ranking_style">
          {{i+1}}
        </view>
      </view>
      <view v-if="i==1" class="number_a number_style_a">
        <view class="ranking_style_a">
          {{i+1}}
        </view>
      </view>
      <view v-if="i==2" class="number_a number_style_a">
        <view class="ranking_style_b">
          {{i+1}}
        </view>
      </view>
      <view v-if="i>2" class="number_a number_style_a">
        <view class="ranking_style_c">
          {{i+1}}
        </view>
      </view>
      <view class="number_b number_style">
        {{item.name}}
      </view>
      <view class="number_c number_style">
        {{item.map.hjgc05.value}}
        <view class="number_cd">
          {{item.map.hjgc05.unit}}
        </view>
      </view>
      <view class="number_d number_style">
        {{item.map.hjgc01.value}}
        <view class="number_cd">
          {{item.map.hjgc01.unit}}
        </view>
      </view>
      <view class="number_e">
        <view class="num_e">
          <view class="number_ee bgcolor_a" v-if="item.success!==0">
            <!-- {{item.success}} -->
          </view>
          <view class="number_ee bgcolor_b" v-if="item.warn!==0">
            <!-- {{item.warn}} -->
          </view>
          <view class="number_ee bgcolor_c" v-if="item.stop!==0">
            <!-- {{item.stop}} -->
          </view>
          <view class="number_ee bgcolor_d" v-if="item.error!==0">
            <!-- {{item.error}} -->
          </view>
        </view>
      </view>
      <view class="number_f num_color_a" v-if="item.state==0">
        {{item.stateName}}
      </view> <view class="number_f num_color_b" v-if="item.state==1">
        {{item.stateName}}
      </view> <view class="number_f num_color_c" v-if="item.state==2">
        {{item.stateName}}
      </view> <view class="number_f num_color_d" v-if="item.state==3">
        {{item.stateName}}
      </view>
       </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        falg:0,
        all_enterprisesList: '',
        screenList: '',
        num:'',
      };
    },
    onLoad(option) {
      this.falg=0
      this.getAll_enterprises()
      if(option.num){
        this.num = option.num
      }
    },
    methods: {
      cheang() {
        this.falg = 0
        this.screenList = this.all_enterprisesList
        this.$refs.popup.close()
      },
      cheang_a() {
        this.falg = 1
        this.screenList=''
        let list = []
        this.all_enterprisesList.forEach((item, index) => {
          if(item.state==1){
            list.push(item)
          }
        })
         this.screenList = list
        // console.log('list',list)
        this.$refs.popup.close()
      },
      cheang_b() {
        this.falg = 2
         this.screenList=''
        let list = []
        this.all_enterprisesList.forEach((item, index) => {
          if(item.state==2){
            list.push(item)
          }
        })
         this.screenList = list
        this.$refs.popup.close()
      },
      cheang_c() {
        this.falg = 3
        this.screenList=''
        let list = []
        this.all_enterprisesList.forEach((item, index) => {
          if(item.state==3){
            list.push(item)
          }
        })
         this.screenList = list
        this.$refs.popup.close()
      },
      popup() {
        // 通过组件定义的ref调用uni-popup方法
        this.$refs.popup.open()
      },
      getAll_enterprises() {
        this.$http.get('/envirnment-air/app/homepage/enterpriseAnalysisMore', {}).then(res => {
          if (res.code == '00000') {
            this.all_enterprisesList = res.data.list
             this.screenList = res.data.list
             if(this.num ==1){
               this.cheang_a()
             }else if(this.num ==2){
               this.cheang_b()
             }else if(this.num ==3){
               this.cheang_c()
             }
            console.log('全部企业', this.all_enterprisesList)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: #FFF;
  }

  .ranking_frist {
    width: 100%;
    height: 44rpx;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    margin-top: 5rpx;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }
  .screen{
    position: fixed;
    top: calc(24rpx + var(--status-bar-height));
    right: 40rpx;
    z-index: 999;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #4EA1FF;
    opacity: 1;
    image{
      margin-right: 10rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .popup{
   width: 750rpx;
   height: 490rpx;
   background: #FFFFFF;
   opacity: 1;
   overflow: hidden;
   border-radius: 20rpx 20rpx 0px 0px;
  }
  .popup_head {
    margin-top: 40rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #58657B;
    opacity: 1;
  }
  .switch {
    display: flex;
    width: 670rpx;
    margin: 48rpx auto 0;
    border-radius: 8rpx;
    border: 1rpx solid #EAEAEA;
  }
  
  .switch_left {
    width: 167rpx;
    height: 66rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 66rpx;
    text-align: center;
    background: #4EA1FF !important;
    border-radius: 8rpx;
  }
  
  .switch_right {
    width: 167rpx;
    height: 66rpx;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 66rpx;
    text-align: center;
    background: #fff;
    border-right: 1rpx solid #EAEAEA;
  }
  .switch_right:last-child{
    border: none;
  }
  .ranking_two {
    width: 50rpx;
    text-align: center;
    margin-left: 20rpx;
  }

  .ranking_three {
    width: 150rpx;
    text-align: center;
    // margin-right: 59rpx;
  }

  .word_a {
    // margin-right: 11rpx;
  }

  .ranking_four {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150rpx;
    // margin-right: 58rpx;

    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_five {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150rpx;
    // margin-right: 69rpx;

    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_six {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150rpx;
    // margin-right: 80rpx;
  }

  .ranking_seven {
    width: 50rpx;
    text-align: center;
    // margin-right: 27rpx;
  }

  .ranking_word {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .ranking_number {
    display: flex;
    align-items: center;
    width: 100%;
    height: 95rpx;
  }

  .number_style {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }
  .number_style_a {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .number_a {
    width: 50rpx;
    text-align: center;
    margin-left: 20rpx;
  }

  .number_b {
    width: 150rpx;
    text-align: center;
    // margin-right: 63rpx;
  }

  .number_cd {
    font-size: 18rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    margin: 6rpx 0 0 6rpx;
  }

  .number_c {
    display: flex;
    width: 150rpx;
    justify-content: center;
    // margin: 0 38rpx 0 10rpx;
  }

  .number_d {
    display: flex;
    width: 150rpx;
    justify-content: center;
    // margin-right: 26rpx;
  }

  .number_e {
    width: 150rpx;
    // margin: 0 47rpx 0 5rpx;
  }

  .num_e {
    display: flex;
    justify-content: center;
  }

  .number_ee {
    text-align: center;
    width: 30rpx;
    height: 32rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF !important;
    border-radius: 6rpx;
    margin-right: 12rpx;
  }

  .number_f {
    width: 50rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #3792FF;
    // margin-right: 27rpx;
  }

  .ranking_style {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/1.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_a {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/2.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_b {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/3.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_c {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/4.png) no-repeat;
    background-size: 100% 100%;
  }
  .num_color_a{
    color: #94A5C7;
  }.num_color_b{
    color: #3792FF;
  }.num_color_c{
    color: #FFCE6C;
  }.num_color_d{
    color: #FF806C;
  }
  .R_color{
    background: rgba(148, 165, 199, 0.08);
    opacity: 1;
  }
  .bgcolor_a{
    background-color: #4EA1FF;
  }.bgcolor_b{
    background-color: #FF806C;
  }.bgcolor_c{
    background-color: #BFD5FF;
  }.bgcolor_d{
    background-color: #94A5C7;
  }
</style>
